<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { useCourseStore } from '@/store/kg/course';
import { ElMessage } from 'element-plus';

const props = defineProps({
  courseId: {
    type: String,
    required: true
  }
});

const courseStore = useCourseStore();
const loading = ref(false);
const allCourses = ref<any[]>([]);
const assignPrerequisites = ref<string[]>([]);
const currentCourse = ref<any>(null);

// 获取所有课程
const getAllCourses = async () => {
  loading.value = true;
  try {
    // 使用课程store中的查询方法获取所有课程
    // 设置较大的页面大小以获取所有课程
    courseStore.pagination.currentPage = 1;
    courseStore.pagination.pageSize = 1000;
    const courses = await courseStore.getCourseList();
    allCourses.value = courses || [];
    
    // 如果当前课程存在于列表中，从可选列表中移除
    if (props.courseId) {
      allCourses.value = allCourses.value.filter(course => String(course.nodeId) !== props.courseId);
    }
  } catch (error) {
    console.error('获取课程列表失败:', error);
    ElMessage.error('获取课程列表失败');
  } finally {
    loading.value = false;
  }
};

// 获取当前课程信息
const getCurrentCourse = async () => {
  if (!props.courseId) return;
  
  try {
    currentCourse.value = await courseStore.getCourseDetail(props.courseId);
  } catch (error) {
    console.error('获取课程详情失败:', error);
    ElMessage.error('获取课程详情失败');
  }
};

// 获取已分配的前置课程
const getAssignedPrerequisites = async () => {
  if (!props.courseId) return;
  
  loading.value = true;
  try {
    const prerequisites = await courseStore.getCoursePrerequisites(props.courseId);
    assignPrerequisites.value = prerequisites.map(item => String(item.nodeId));
  } catch (error) {
    console.error('获取前置课程失败:', error);
    ElMessage.error('获取前置课程失败');
  } finally {
    loading.value = false;
  }
};

// 监听课程ID变化
watch(
  () => props.courseId,
  (newVal) => {
    if (newVal) {
      getCurrentCourse();
      getAssignedPrerequisites();
    }
  },
  { immediate: true }
);

onMounted(() => {
  getAllCourses();
});

// 对外暴露选择的前置课程ID列表
defineExpose({
  assignPrerequisites
});
</script>

<template>
  <div v-loading="loading">
    <div v-if="currentCourse" class="mb-3">
      <h3 class="mb-1 text-lg font-medium">为 "{{ currentCourse.name }}" 选择前置课程</h3>
      <p class="text-gray-500 text-sm">前置课程是学生学习当前课程前需要完成的课程</p>
    </div>
    
    <el-transfer
      v-model="assignPrerequisites"
      :data="allCourses"
      :props="{
        key: 'nodeId',
        label: 'name'
      }"
      :button-texts="['取消选择', '设为前置']"
      :titles="['可选前置课程', '已选前置课程']"
      :format="{ noChecked: `总共 \${total}`, hasChecked: '\${checked}/\${total}' }"
      filterable
      filter-placeholder="请输入课程名称搜索"
    >
      <template #default="{ option }">
        <div class="transfer-item">
          <div class="flex items-center">
            <span class="font-bold">{{ option.name }}</span>
            <span class="ml-2 text-gray-400 text-xs">({{ option.code }})</span>
          </div>
        </div>
      </template>
    </el-transfer>
  </div>
</template>

<style scoped>
.transfer-item {
  padding: 4px 0;
}

/* 自定义Transfer组件样式 */
:deep(.el-transfer) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

:deep(.el-transfer-panel) {
  width: 30%;
  min-width: 220px;
  max-width: 320px;
}


:deep(.el-transfer-panel__body) {
  height: 300px;
}

:deep(.el-transfer-panel__list.is-filterable) {
  height: 160px;
}
</style> 